<script setup>
import { onMounted, onUnmounted } from 'vue';
import ProductCard from '../product/ProductCard.vue';


const props = defineProps({
  title: {
    type: String,
    default: '推荐商品'
  },
  layout: {
    type: String,
    default: 'grid'
  },
  products: {
    type: Array,
    default: () => []
  },
  hasMore: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  // 骨架屏数量
  skeletonCount: {
    type: Number,
    default: 4,
  },
})

// 1、创建emit，defineEmits暴露事件
// 2、使用emit触发事件 emit('事件名')
// 3、父组件@事件名 触发函数，子组件调用父组件方法，子组件提供触发时机，父组件提供函数内容

const emit = defineEmits(['loadMore'])


// 滚动事件处理函数，用于实现无限滚动加载
const handleScroll = () => {
  // 如果没有更多数据或正在加载中，则直接返回不执行任何操作
  if (!props.hasMore || props.loading) return

  // 获取页面滚动的距离
  const scrollTop = document.documentElement.scrollTop

  // 获取浏览器窗口可视区域高度
  const clientHeight = document.documentElement.clientHeight

  // 获取整个页面的实际高度
  const scrollHeight = document.documentElement.scrollHeight

  // 当滚动到底部附近时（距离底部小于50像素），触发加载更多数据的事件
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    // 发出loadMore事件通知父组件加载更多数据
    emit('loadMore')
  }
}

onMounted(() => {
  // 监听滚动事件
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  // 组件销毁时取消监听滚动事件
  window.removeEventListener('scroll', handleScroll)

})


</script>

<template>
  <div class="recommend-products">
    <!-- 标题栏 -->
    <div class="section-header">
      <h2 class="section-title"> {{ props.title }}</h2>
      <van-button size="small" type="default" class="more-btn" @click="$router.push('/category')">
        查看更多
        <van-icon name="arrow" />
      </van-button>


    </div>

    <!-- 商品列表 -->
    <div class="product-list" :class="{ 'grid-view': layout === 'grid' }">
      <template template v-if="!loading && products.length > 0">
        <ProductCard v-for="item in props.products" :product="item" :key="item.id"></ProductCard>
      </template>
      <!-- 加载中 --骨架屏 -->
      <template v-if="loading">
        <div class="product-skeleton" v-for="item in 4" :key="item">
          <van-skeleton :row="3"></van-skeleton>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recommend-products {
  margin-bottom: var(--app-spacing-lg, 24px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--van-text-color);
  margin: 0;
  position: relative;
  padding-left: 12px;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: var(--van-primary-color);
    border-radius: 2px;
  }
}

.more-btn {
  font-size: 12px;
}

.product-list {
  width: 100%;

  &.grid-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.product-skeleton {
  background-color: #fff;
  border-radius: var(--van-radius-md, 8px);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--van-shadow-1);
}

.grid-view .product-skeleton {
  margin-bottom: 0;
}

.empty-state {
  padding: 24px 0;
  width: 100%;
}

.load-more {
  margin-top: 16px;
  padding: 0 12px;
}
</style>